<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JPG to PNG Converter</title>
    <style>
        .container {
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            text-align: center;
        }

        #preview,
        #canvas {
            max-width: 100%;
            margin: 20px 0;
        }

        .controls {
            margin: 10px 0;
        }
    </style>
</head>
<!-- http://127.0.0.1:5500/media%E5%A4%84%E7%90%86/image-converter/convert-to-png.html -->

<body>
    <div class="container">
        <!-- <h1>JPG 转 PNG 转换器</h1> -->
        <input type="file" id="fileInput">
        <br>
        <div class="controls">
            <label>水印处理强度：</label>
            <input type="range" id="threshold" min="0" max="255" value="255">
        </div>
        <canvas id="canvas"></canvas>
        <br>
        <button id="processBtn" style="display: none;">处理水印</button>
        <img id="imgBaseUrl" src="">
        <a id="downloadLink" style="display: none;">
            <button>下载处理后的图片</button>
        </a>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
    <script>
        const fileInput = document.getElementById('fileInput');
        const downloadLink = document.getElementById('downloadLink');
        const processBtn = document.getElementById('processBtn');
        const threshold = document.getElementById('threshold');
        let canvas = new fabric.Canvas('canvas');
        let file = null;
        fileInput.addEventListener('change', function (e) {
            file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function (event) {
                fabric.Image.fromURL(event.target.result, function (img) {
                    canvas.setWidth(img.width);
                    canvas.setHeight(img.height);
                    canvas.setBackgroundImage(img, canvas.renderAll.bind(canvas));
                    processBtn.style.display = 'inline-block';
                });
            };
            reader.readAsDataURL(file);
        });

        processBtn.addEventListener('click', function () {
            const ctx = canvas.getContext('2d');
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
            const data = imageData.data;
            const thresholdValue = parseInt(threshold.value);

            // 处理水印
            for (let i = 0; i < data.length; i += 4) {
                const r = data[i];
                const g = data[i + 1];
                const b = data[i + 2];

                // 检测可能的水印像素
                if (r > thresholdValue && g > thresholdValue && b > thresholdValue) {
                    // 将接近白色的像素调整为背景色
                    const avg = (r + g + b) / 3;
                    data[i] = avg;
                    data[i + 1] = avg;
                    data[i + 2] = avg;
                }
            }

            ctx.putImageData(imageData, 0, 0);

            // 更新下载链接
            const href = canvas.toDataURL('image/png', 1.0);
            imgBaseUrl.src = href;
            // downloadLink.href = canvas.toDataURL('image/png', 1.0);
            // downloadLink.download = file.name.replace(/\.(jpg|jpeg)$/i, '_nowatermark.png');
            // downloadLink.style.display = 'inline-block';
        });
    </script>
</body>

</html>